<template>

  <main class="content">
    <buttons v-model:startTime="monthObj.yearMonthStart" v-model:endTime="monthObj.yearMonthEnd" @confirm="confirm"
      key="2" />

    <card :title="`续期${props.continueType}个月继续率(%)`">
      <div class="rang-box">
        <div v-for="(item, index) in riskTypeList" class="rang-item" :key="index">
          <van-circle v-model:current-rate="riskTypeData[item.code1]" :rate="riskTypeData[item.code1]"
            :text="(riskTypeData[item.code1]?.toFixed(2) || '0.00') + '%'" class="rang" stroke-width="160"
            stroke-linecap="square" :color="{ '0%': 'var(--van-primary-color)','100%': '#1085F8',}"
            layer-color="#EFEFEF" />
          <!--  -->
          <div v-if="item.codeName" style="margin-bottom: 15px;">{{item.codeName}}继续率</div>
          <!-- <div>{{riskTypeData[item.code1]}}</div> -->
        </div>
      </div>
    </card>

    <card>
      <template #title>
        <div class="card-table-title-box">
          <span>分公司{{props.continueType}}个月继续率(%)</span>
          <div class="title-right-box">
            <span v-for="(item, index) in riskTypeList" @click="riskTypeCli(item,'level',1)"
              :class="[active.level == item.code1 && 'title-active']" :key="index">{{item.codeName}}<span
                v-if="index != riskTypeList.length - 1" style="color: #c4c4c4;">/</span>
            </span>
          </div>
        </div>
      </template>
      <tableCom :data="active.levelData" :columns="active.levelColumns">
        <!-- <template #duePrem="{row,$index}">
          <div class="progress-box">
            <van-progress class="progress-self" :percentage="78.65" :show-pivot="false" color="var(--van-primary-color)"
              layer-color="#ebedf0" stroke-width="18" />
          </div>
        </template> -->
        <!-- <template #rate="{row,$index}">
          <div class="rang-text-box">
            <van-circle v-model:current-rate="currentRate" :rate="22.43" stroke-width="180" size="22"
              stroke-linecap="square" layer-color="#ebedf0" color="var(--van-primary-color2)" class="little-circle" />
            <span style="font-size: 12px;color: #C4C4C4;margin-left: 5px;">92.43%</span>
          </div>
        </template> -->
      </tableCom>
    </card>

    <card>
      <template #title>
        <div class="card-table-title-box">
          <span>渠道{{props.continueType}}个月继续率(%)</span>
          <div class="title-right-box">
            <span v-for="(item, index) in riskTypeList" @click="riskTypeCli(item,'saleChnl',1)"
              :class="[active.saleChnl == item.code1 && 'title-active']" :key="index">{{item.codeName}}<span
                v-if="index != riskTypeList.length - 1" style="color: #c4c4c4;">/</span>
            </span>
            <!-- <span :class="['title-active']">护理险</span>/
            <span>疾病险</span>/
            <span>整体</span> -->
          </div>
        </div>
      </template>
      <tableCom :data="active.saleChnlData" :columns="active.saleChnlColumns">
        <!-- <template #comCodeName="{row,$index}">
                <div>{{row.comCodeName}}{{ $index }}</div>
              </template> -->
      </tableCom>
    </card>
  </main>
</template>

<script setup name="thirteenPersistency">
import { ref, reactive, onMounted, computed } from "vue";
import mockApi from "../../../api/api.js";
import card from "../../../components/card.vue";
import tableCom from "../../../components/tableCom.vue";
import buttons from "../../../components/buttons.vue";

import { userStore } from "../../../stores/userStore";
const user = userStore();
const userInfo = user.userInfo || {};
const riskTypeList = user.riskTypeList;
const riskTypeData = ref({
  // continueType: "25",
  "00": 0,
  CT: 0,
  NT: 0,
});
console.log(user, userInfo, riskTypeList);

const props = defineProps({
  continueType: String,
});

const monthObj = ref({
  yearMonthStart: "",
  yearMonthEnd: "",
});

let query = {
  comCode: userInfo.manageCom,
  continueType: "01", // 01 13 02 25
  riskType: "00",
  yearMonthEnd: "",
  yearMonthStart: "",
};

const active = ref({
  level: "00",
  levelColumns: [
    {
      title: "业务单位",
      key: "comCodeName",
      width: "60",
    },
  ],
  levelData: [],
  levelAllData: null,
  saleChnl: "NT",
  saleChnlColumns: [
    {
      title: "渠道",
      key: "saleName",
      width: "60",
    },
  ],
  saleChnlAllData: null,
  saleChnlData: [],
});

function confirm(val, btn) {
  // console.log(monthObj.value);
  let obj = {
    comCode: "86",
    continueType: props.continueType,
    ...monthObj.value,
  };
  mockApi.continueInfoQuery(obj).then((res) => {
    if (res.code == 200) {
      // console.log("res", res);
      
      riskTypeData.value = res.data || {
        continueRate: 0,
        ct: 0,
        nt: 0,
      };
      riskTypeList.forEach((item) => {
        if (item.code1 == "00") return;
        riskTypeData.value[item.code1] =
          riskTypeData.value[item.code1.toLocaleLowerCase()];
      });
      riskTypeData.value["00"] = res.data?.continueRate || 0;
      console.log("riskTypeData.value", props.continueType, riskTypeData.value);
    }
  });
  setTimeout(() => {
    ["level", "saleChnl"].forEach((key) => {
      active.value[key + "Columns"].length == 1 &&
        active.value[key + "Columns"].push(...columns);

      let riskTypeItem = riskTypeList.filter(
        (item) => item.code1 == active.value[key]
      )[0];

      riskTypeCli(riskTypeItem, key);
    });
  }, 100);
}

let apiMap = {
  level: mockApi.continueCompanyQuery,
  saleChnl: mockApi.continueSaleQuery,
};
function riskTypeCli(item, type, n) {
  active.value[type] = item.code1;

  if (n && active.value[type + "AllData"]) {
    active.value[type + "Data"] =
      active.value[type + "AllData"][
        item.codeName == "整体"
          ? "continueRate"
          : active.value[type].toLocaleLowerCase()
      ];
    return;
  }
  let obj = {
    comCode: "86",
    continueType: props.continueType,
    ...monthObj.value,
  };
  apiMap[type](obj).then((res) => {
    if (res.code == 200) {
      active.value[type + "AllData"] = res.data || {
        continueRate: [],
        ct: [],
        nt: [],
      };
      active.value[type + "Data"] =
        active.value[type + "AllData"][
          item.codeName == "整体"
            ? "continueRate"
            : active.value[type].toLocaleLowerCase()
        ];
    }
  });
}
function fiexd2(val) {
  return val.toFixed ? val.toFixed(2) : val || "0.00";
}
const columns = [
  {
    title: "应收保费(万元)",
    key: "duePrem",
    width: "100",
    formatter: fiexd2,
  },
  {
    title: "实收保费(万元)",
    key: "actuPrem",
    width: "100",
    formatter: fiexd2,
  },
  {
    title: "继续率",
    key: "rate",
    width: "50",
    formatter(val) {
      return val + "%";
    },
  },
];

const data = ref([
  {
    comCodeName: "上海",
    duePrem: "4389.35",
    actuPrem: "4389.35",
    rate: "95.35%",
  },
  {
    comCodeName: "上海",
    duePrem: "4389.35",
    actuPrem: "4389.35",
    rate: "95.35%",
  },
  {
    comCodeName: "上海",
    duePrem: "4389.35",
    actuPrem: "4389.35",
    rate: "95.35%",
  },
  {
    comCodeName: "上海",
    duePrem: "4389.35",
    actuPrem: "4389.35",
    rate: "95.35%",
  },
]);
</script>

<style lang="less" scoped>
.content {
  width: 100vw;
  padding-bottom: 20px;
  .rang-box {
    display: flex;
    justify-content: space-between;
    .rang-item {
      position: relative;
      flex: 1;
      text-align: center;
      color: #6d7278;
      font-size: 16px;
      .rang {
        width: calc(100% - 25px);
        margin-top: 15px;
      }
      :deep(.van-circle__text) {
        color: var(--van-primary-color);
      }
    }
    .rang-item + .rang-item {
      border-left: 1px solid #e5e5e5;
    }
  }
  .card-table-title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-right-box {
      color: #c4c4c4;
      font-size: 14px;
      .title-active {
        color: var(--van-primary-color);
      }
    }
  }
}
.progress-box {
  padding-bottom: 8px;
  box-sizing: border-box;
  .progress-self {
    border-radius: 25px;
    transform: translateY(2px);
  }
}
.rang-text-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 70px;
  height: 24px;
}
</style>